/**
 * Created by ziyu on 17/5/8.
 */

import React, {Component, PropTypes} from 'react'
import Styles from './Index.less'
import SearchStyle from '../../common/less/search.less'
import {message, Col, Icon, Button, Modal, Form, Input, Spin, Table, Tag} from 'antd'
import {fetchPost} from '../../../utils/request'
import Search from '../../common/components/Search'
import moment from 'moment'

const FormItem = Form.Item

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      overdueAdminList: [],
      page: {
        currentPage: 1,
        pageSize: 30,
        totalCount: 0
      },
      params: {
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD'),
      },
      searchParams: {
        list: [
          {
            name: 'Date',
            type: 'range',
            key: ['startDate', 'endDate'],
            className: 'pr20',
            placeHolder: '',
            values: [
              moment(),
              moment(),
            ]
          },
          {
            name: 'Agent',
            type: 'select',
            key: 'followId',
            className: 'pr20',
            placeHolder: '',
            values: []
          },
          {
            name: 'Mobile',
            type: 'text',
            key: 'mobile',
            className: 'pr20',
            placeHolder: '',
            values: []
          },
          {
            name: '',
            type: 'search',
            key: '',
            className: 'pr20',
            values: []
          }
        ],
        // api: '/collection/v2/case/query'
      },
      list: [],
    }
  }

  componentDidMount() {
    this.getAdminCollectionList()
    this.getData()
  }

  componentWillReceiveProps(props) {
    // this.getData()
  }

  getAdminCollectionList() {
    fetchPost('/collection/v2/agent/query', {}).then(json => {
      if (json.code === 0) {
        let list = json.data.itemList
        if (list !== null && list.length > 0) {
          this.setState({
            overdueAdminList: list
          }, () => {
            let followIdList = []
            list.map(item => {
              followIdList.push({
                name: item.name,
                value: (item.followId + ''),
              })
            })

            let searchParamsTmp = this.state.searchParams
            let paramsList = searchParamsTmp.list
            for (let i = 0; i < paramsList.length; i++) {
              let obj = paramsList[i]
              if (obj.key && obj.key == 'followId') {
                obj.values = followIdList
              }
            }
            this.setState({
              searchParams: searchParamsTmp
            })
          })
        }
      } else {
        message.error(json.msg)
      }
    })
  }

  getData() {
    this.setState({
      loading: true
    })
    fetchPost(`/collection/v2/recording/list?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`, this.state.params).then((res) => {
      if (res.code === 0) {
        let list = res.data.callDurationList
        if (list && list.length > 0) {
          this.setState({
            list,
            page: {
              ...this.state.page,
              totalCount: res.page.totalCount || 0
            }
          })
        } else {
          message.info('No Data')
          this.setState({
            list: [],
            page: {
              currentPage: 1,
              pageSize: 30,
              totalCount: 0
            }
          })
        }
        this.setState({
          loading: false
        })
      } else {
        message.error(res.msg)
        this.setState({
          list: []
        })
      }
    })
  }

  currentPage(current) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage: current
      }
    }, () => {
      this.getData()
    })
  }

  changeParams(params) {
    this.setState({
      params: params
    }, () => {
      this.getData()
    })
  }

  switchChange() {
    const {switchBoolean, params} = this.state
    let sort = ''
    if (switchBoolean) {
      sort = '2'
    } else {
      sort = '1'
    }
    this.setState({
      switchBoolean: !switchBoolean,
      params: {
        ...params,
        sort,
      }
    }, () => {
      this.getData()
    })
  }

  setPagination() {
    let self = this
    return {
      total: this.state.page.totalCount,
      pageSize: this.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal(total) {
        return `Total ${total} `
      },
      onChange(current) {
        self.nextPage(current)
      }
    }
  }

  nextPage(currentPage) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage
      }
    }, () => {
      this.getData()
    })
  }

  render() {
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    }
    const {getFieldDecorator} = this.props.form

    const columns = [
      {
        title: 'collectionNo',
        dataIndex: 'collectionNo',
        key: 'collectionNo'
      },
      {
        title: 'followUp',
        dataIndex: 'followUp',
        key: 'followUp'
      },
      {
        title: 'Call mobile',
        dataIndex: 'mobile',
        key: 'mobile'
      },
      {
        title: 'startTime',
        dataIndex: 'startTime',
        key: 'startTime'
      },
      {
        title: 'endTime',
        dataIndex: 'endTime',
        key: 'endTime'
      },
      {
        title: 'callDuration',
        dataIndex: 'callDuration',
        key: 'callDuration'
      },
      {
        title: 'Recording file',
        dataIndex: 'videoUrl',
        key: 'videoUrl',
        render: (text, record) => (
          record.videoUrl ?
            <div>
              <audio controls>
                <source src={record.videoUrl}/>
              </audio>
            </div> : null
        )
      },
    ]

    return (
      <div className={Styles.box}>
        <div className={SearchStyle.searchClass}>
          <Search searchParams={this.state.searchParams}
                  changeParams={(params) => this.changeParams(params)}/>
        </div>

        <Table rowKey={record => record.id}
               pagination={this.setPagination(this)}
               columns={columns}
               dataSource={this.state.list}
               loading={this.state.loading}
               bordered
               size='small'
        />
      </div>
    )
  }
}

Index = Form.create()(Index)
export default Index
